<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>订单确认</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../js/jquery/jquery.js"></script>
    <script src="../js/jquery_mobile/jquery.mobile-1.4.2.js"></script>
    <link rel="stylesheet" href="../css/jquery_mobile/jquery.mobile-1.4.2.css"/>
    <script src="../js/jquery/jquery.validate.js"></script>
    <script>
        $("#comfire_form").validate();
        $(function(){
            $("#btn_comfire").click(function(){
                window.location.href="books_list.html";
            });
        });
    </script>
</head>
<body>
<div data-role="page">
    <div data-role="header" data-theme="b">
        <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext">Back</a>
        <h1>订单确认</h1>
    </div>
    <!--
    由于jquery mobile的机制
    需要加载js，css等内容，得
    在data-role="content"内
    写入js和css
    -->
    <div data-role="content">
        <!--外部js的开始-->

        <script>
            function changePrice() {
                var range = document.getElementById("slider-1");
                var sum_price = document.getElementById("sum_price");
                //得到标签的value属性值（也就是单价）
                var unit_price = document.getElementById("unit_price").getAttribute("value");
                //设置总价的标签value属性值
                sum_price.setAttribute("value", range.value * unit_price + "");
                sum_price.innerHTML = "总价:￥" + range.value * unit_price;
            }
            $(function(){
                $("#slider-1").change(function(){
                    var count = $("#slider-1").val();
                    alert(count);
                });
            });
        </script>
        <!--外部js的结束-->
            <div class="order_info">
                <img id="product-img " width="100px" height="80px">
                <h3>订单信息</h3>
                <label>名称：港澳三天游</label>
                <label id="unit_price" value="200">价钱：￥200</label>
                <label>数量：</label>
                <input type="range" name="slider-1" id="slider-1" data-highlight="true" min="0" max="20" value="0"
                       onchange="changePrice()">
                <label id="sum_price">总价：￥0</label>
            </div>
            <div class="ui-block-a" style="width: 100%">
                <input id="btn_comfire" type="button" value="提交订单" data-theme="b">
            </div>
    </div>
</div>

</body>

</html>